<template>
  <div>
    <section class="first">
      <h2>积分信息</h2>
      <div class="exchangeInfo">
        <span class="label">当前积分数：</span><span>{{scorePoint}}</span><br/>
        <span class="label">当前金豆数：</span><span>{{beanPoint}}</span><br/>
        <span class="label">已消耗积分总数：</span><span>{{consumePoint}}</span>
      </div>

      <h2>兑换区</h2>
      <div class="exchangeInfo">
        <span class="label">兑换比率：</span><span>1:{{rate*10/Math.floor(rate*10)}} | 积分:金豆</span><br/>
        <span class="label">兑换金豆数：</span><input class="beanInput" v-model="beanInput"/><span class="tips">{{tips}}</span><br/>
        <span class="label"></span><el-button @click="submit" :disabled="disabledBtn">提交</el-button>
      </div>

    </section>
    <hr/>
    <section class="second">
      <h3 class="secondTitle">如何兑换积分</h3>
      <p class="secondDetail">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
        Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus sapien nunc eget.</p>
      <h3 class="secondTitle">积分兑换说明</h3>
      <p class="secondDetail">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
        Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus sapien nunc eget.</p>
    </section>
  </div>
</template>
<script>
  export default{
    data(){
      return {
        disabledBtn:true,
        scorePoint:0,
        consumePoint:0,
        beanPoint:0,
        rate:1,
        beanInput:'',
        tips:'',
      }
    },
    methods:{
      submit(){
        this.$http({
          method: 'post',
          url: 'point/exchange',
          data: {"bean_point":parseInt(this.beanInput)}
        }).then((response)=>{
          if(response.data.status == 'SUCCESS'){
            let data = response.data.object;
            this.scorePoint = parseInt(data.scorePoint);
            this.beanPoint = parseInt(data.beanPoint);
            this.consumePoint = parseInt(data.consumePoint);
            this.beanInput = '';
            this.$message({
              type:'success',
              message:'兑换成功',
            });
          }else{
            this.$message({
              type:'error',
              message:'兑换失败',
            });
          }
        }).catch((err)=>{
          this.$message({
            type:'error',
            message:'兑换失败',
          });
        })
      },
    },
    watch:{
      beanInput:function (newInput) {
        if(/^[0-9]*$/.test(newInput) && newInput!== ''){
          let wantingBean = parseInt(newInput);
          if(wantingBean > this.maxBean){
            this.tips = '所需积分不足以兑换出该金豆数';
            this.disabledBtn = true;
          }else{
            this.tips = `需消耗${wantingBean*this.rate}积分`;
            this.disabledBtn = false;
          }
        }else{
          if(newInput === '')
            this.tips = '';
          else
            this.tips = '请输入正整数字';
          this.disabledBtn = true;
        }
      }
    },
    computed:{
      maxBean:function () {
        return Math.floor(this.scorePoint/this.rate);
      }
    },
    created(){
      this.$http({
        method: 'get',
        url: 'point/get',
      }).then((res)=>{
        res = res.data;
        let data = res.object;
        if(res.status == 'SUCCESS'){
          this.scorePoint = parseInt(data.scorePoint);
          this.beanPoint = parseInt(data.beanPoint);
          this.consumePoint = parseInt(data.consumePoint);
        }
      }).catch((err)=>{

      })
    }
  }
</script>
<style scoped>
  .first{
    margin: 0.8em;
  }
  .first>h2{
    font-size: 1em;
    color: #f85377;
  }
  .exchangeInfo{
    margin-left: 0.8em;
    line-height: 2.5em;
  }
  .label{
    text-align: right;
    display: inline-block;
    width: 8.5em;
  }
  .beanInput{
    height: 1.7em;
    border:1px solid gray;
    border-radius: 0.4em;
    outline-color: #fb7d9b;
  }
  .tips{
    font-size: 0.8em;
    margin-left: 1em;
  }
  .second{
    margin: 0em 0.8em;
  }
  .secondTitle{
    font-size: 0.8em;
    color: #fb7d9b;
  }
  .secondDetail{
    font-size: 12px;
    text-indent: 2em;
  }
</style>